<template>
  <MenuBar class="admin-top-bar">
    <div slot="left" class="left">
      <span></span>
      <span>后台管理页面</span>
      <span></span>
    </div>
    <div slot="right" class="right">
      <span>你好,管理员</span>
      <span></span>
      <span></span>
      <span class="go-front" @click="goFront">去前台</span>
    </div>
  </MenuBar>
</template>

<script>
  import MenuBar from "components/common/menubar/MenuBar";
  export default {
    name: "AdminTopBar",
    components: {
      MenuBar,
    },
    methods: {
      goFront() {
        this.$router.push('/index')
      }
    }
  }
</script>

<style scoped>
  .admin-top-bar {
    height: 70px;
    background-color: #343a40;
  }
  .left {
    text-align: center;

    height: 70px;
    line-height: 70px;

    /*background-color: #fff;*/
  }
  .left span {
    flex: 1;
    margin-left: 10px;

    font-size: 20px;
    color: #bfbfbf;

    /*background-color: yellow;*/
  }
  .right {
    text-align: center;

    height: 70px;
    line-height: 70px;

    /*background-color: #fff;*/
  }
  .right span {
    flex: 1;
    margin-left: 10px;

    font-size: 20px;
    color: #bfbfbf;
    /*background-color: yellow;*/
  }
  .go-front:hover {
    cursor: pointer; /*放上变手指*/
    color: white;
  }
</style>